<!DOCTYPE html>
<html class="" lang="zh-CN">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta content="always" name="referrer">
  <meta content="Chrome=1,IE=edge" http-equiv="X-UA-Compatible">
  <title>WangEditor基本使用</title>
  <style>
    /*设置编辑框高度*/
    .w-e-text-container{
      height: 500px !important;
    }
  </style>
  <!-- 引入jquery -->
  <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
  <!-- 引入wangEditor插件 -->
<!--  <script type="text/javascript" src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>-->
  <script type="text/javascript" src="js/wangEditor.min.js"></script>
</head>
<body>
<form id="form" method="post">
  <div id="contentDiv" style="width: 1000px;"></div>
  <textarea name="content" id="content" style="" ></textarea>
</form>
<button id="btn1">获取富文本text内容</button>
<button id="btn2">获取富文本html内容</button>
<button id="btn3">获取表单信息</button>
<button id="btn4">获取文本域内容</button>
</body>
<script>
  var E = window.wangEditor;
  var editor = new E('#contentDiv')
  var $text1 = $('#content');
  editor.change = function (html) {
    // 监控变化，同步更新富文本内容到 textarea
    $text1.val(html);
  }
  editor.config.uploadImgServer = '/index/public/upload?type=imgFile';	//自定义上传图片（改成自己写的图片上传方法的路径）
  editor.config.uploadFileName = 'imgFile';	//自定义文件名
  /* 这样的话PHP后台这样获取文件信息
  //将文件上传的信息取出赋给变量
  $name = $_FILES['imgFile']['name'];
  $tmp_name = $_FILES['imgFile']['tmp_name'];
  $size = $_FILES['imgFile']['size'];
  $error = $_FILES['imgFile']['error'];
  */
  editor.config.uploadImgHooks = {
    customInsert: function (insertImg, result, editor) {
      // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
      // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

      // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
      var url = result.url
      insertImg(url)

      // result 必须是一个 JSON 格式字符串！！！否则报错
    }
  }
  editor.config.customAlert = function (info) {	//关闭默认提示信息
    // info 是需要提示的内容
    //alert('自定义提示：' + info)
  }
  // 或者 var editor = new E( document.getElementById('content') )
  editor.create();
  $text1.val(editor.txt.html());

  //获取内容
  $('#btn1').click(function(){
    alert(editor.txt.text());	// 读取 text
  });
  $('#btn2').click(function(){
    alert(editor.txt.html());	// 读取 html
  });
  $('#btn3').click(function(){
    var formData = new FormData($( "#form" )[0]);
    alert(formData);
  });
  $('#btn4').click(function(){
    alert($('#content').val());	// 读取 html
  });
</script>
</html>